import { div } from '../div'
import { rgb, px } from '../styled'
import { ComponentProps, createComponent } from '../component'

/**
 * HelloWorld组件属性
 */
export interface HelloWorldProps extends ComponentProps {
  text?: string
}

/**
 * HelloWorld组件
 * 基于Zed GPUI的hello_world.rs示例实现
 */
export const HelloWorld = createComponent<HelloWorldProps>((props) => {
  const { text = 'World' } = props

  return div()
            .flex()
            .flex_col()
            .gap_3()
            .bg(rgb(0x505050))
            .size(px(500.0))
            .justify_center()
            .items_center()
            .shadow_lg()
            .border_1()
            .border_color(rgb(0x0000ff))
            .text_xl()
            .text_color(rgb(0xffffff))
            .child(`Hello, ${text}!`)
            // .child(
            //     div()
            //         .flex()
            //         .gap_2()
            //         //.child(
            //             //div()
            //                 //.size_8()
            //                 //.bg(colors.red)
            //                 //.border_1()
            //                 //.border_dashed()
            //                 //.rounded_md()
            //                 //.border_color(colors.white),
            //         //)
            //         // .child(
            //         //     div()
            //         //         .size_8()
            //         //         .bg(colors.green)
            //         //         .border_1()
            //         //         .border_dashed()
            //         //         .rounded_md()
            //         //         .border_color(colors.white),
            //         // )
            //         // .child(
            //         //     div()
            //         //         .size_8()
            //         //         .bg(colors.blue)
            //         //         .border_1()
            //         //         .border_dashed()
            //         //         .rounded_md()
            //         //         .border_color(colors.white),
            //         // )
            //         // .child(
            //         //     div()
            //         //         .size_8()
            //         //         .bg(colors.yellow)
            //         //         .border_1()
            //         //         .border_dashed()
            //         //         .rounded_md()
            //         //         .border_color(colors.white),
            //         // )
            //         // .child(
            //         //     div()
            //         //         .size_8()
            //         //         .bg(colors.black)
            //         //         .border_1()
            //         //         .border_dashed()
            //         //         .rounded_md()
            //         //         .rounded_md()
            //         //         .border_color(colors.white),
            //         // )
            //         // .child(
            //         //     div()
            //         //         .size_8()
            //         //         .bg(colors.white)
            //         //         .border_1()
            //         //         .border_dashed()
            //         //         .rounded_md()
            //         //         .border_color(colors.black),
            //         // ),
            // )

})

/**
 * 运行HelloWorld示例
 * 提供一个便捷的函数来启动示例
 */
export function runHelloWorldExample() {
  return HelloWorld({ text: 'World' })
}